<template>
	<div>
		<div style="height: 80px;">
			<div class="topBar">
				<div class="secondBar">
					<div class="imgBox">
						<img style="height: 60px;width: 100px;" src="../../assets/img/baoxian.png" />
					</div>
					<div class="lineBar"></div>
					<span class="title">惠企链惠单平台</span>
				</div>
			</div>
		</div>
		
		<div class="fatherBox">
			<div class="contentTitle">请选择注册类型</div>
			<div class="boxContent">
				<div class="contentBox" @click="goCompany">
					<div class="textPadding">企业</div>
					<div class="textPadding1">适合普通企业注册</div>
					<div class="textPadding2" >企业注册后可以操作开具信单，接收信单，信单融资，信单转让，信单拆分。</div>
				</div>
				<div class="contentBox" @click="goCapital">
					<div class="textPadding">资金方</div>
					<div class="textPadding1">适合银行、保理公司等资金方注册</div>
					<div class="textPadding2" >注册为资金方可提供融资，接收信单。</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#F5F7FA')
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		methods: {
			goCompany(){
				this.$router.push({path:'/company'})
			},
			goCapital(){
				this.$router.push({path:'/capital'})
			}
		}
	}
</script>

<style>
	.topBar {
		position: fixed;
		top: 0;
		height: 80px;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0px 5px 19px 0px #b8b8b8;
	}

	.secondBar {
		width: 90%;
		height: 80px;
		margin: 0 auto;
		display: flex;
	}

	.imgBox {
		width: 100px;
		height: 60px;
		/* margin-top: 10px; */
		align-self: center;
	}

	.lineBar {
		height: 35px;
		width: 2px;
		background-color: #001528;
		align-self: center;
		margin-left: 20px;
	}

	.title {
		margin-left: 20px;
		font-size: 25px;
		font-weight: bold;
		align-self: center;
	}

	.fatherBox {
		
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		background-color: #FFFFFF;
		border: 1px solid #EEEEEE;
	}

	.contentTitle {
		margin-top: 50px;
		font-size: 25px;
		text-align: center;
		font-weight: bold;
	}

	.boxContent {
		width: 100%;
		display: flex;
		margin-top: 50px;
		margin-bottom: 100px;
	}

	.contentBox {
		height: 200px;
		width: 35%;
		margin: 0 auto;
		background-color: #F0F0F0;
		padding: 30px;
	}
	.contentBox:hover{
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0px 5px 19px 0px #b8b8b8;
	}
	.textPadding{
		margin-bottom:  20px;
		font-weight: bold;
		font-size: 20px;
	}
	.textPadding1{
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
	}
	.textPadding2{
		font-size: 15px;
		letter-spacing: 2px;
	}
</style>
